<template>
  <el-form
    ref="loginForm"
    :model="form"
    :rules="rules"
    label-width="0"
    size="large"
    @keyup.enter="login"
  >
    <el-form-item prop="user">
      <el-input
        v-model="form.user"
        prefix-icon="el-icon-user"
        clearable
        :placeholder="$t('login.userPlaceholder')"
      >
        <!-- <template #append>
					<el-select v-model="userType" style="width: 130px;">
						<el-option :label="$t('login.admin')" value="admin"></el-option>
						<el-option :label="$t('login.user')" value="user"></el-option>
					</el-select>
				</template> -->
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="form.password"
        prefix-icon="el-icon-lock"
        clearable
        show-password
        :placeholder="$t('login.PWPlaceholder')"
      ></el-input>
    </el-form-item>
    <!-- <el-form-item style="margin-bottom: 10px;">
				<el-col :span="12">
					<el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
				</el-col>
				<el-col :span="12" class="login-forgot">
					<router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
				</el-col>
		</el-form-item> -->
    <el-form-item>
      <el-button
        type="primary"
        style="width: 100%; border-radius: 4px"
        :loading="islogin"
        round
        @click="login"
        >{{ $t("login.signIn") }}</el-button
      >
    </el-form-item>
    <div class="protocolbox" v-if="showProtocol">
      <div class="contbox">
        <p class="title">{{ $t("login.about") }}</p>
        <div class="content" v-html="htmlText"></div>
        <el-checkbox v-model="selected" :class="{ move: isSaveing }">{{
          $t("login.agreeText")
        }}</el-checkbox>
        <div id="footer">
          <el-button @click="showProtocol = false">{{
            $t("components.upload.cancel")
          }}</el-button>
          <el-button type="primary" @click="nextDo">{{
            $t("login.agreeBtn")
          }}</el-button>
        </div>
      </div>
    </div>
    <!-- <div class="login-reg">
			{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
		</div> -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      isSaveing: false,
      selected: false,
      showProtocol: false,
      htmlText: "",
      userType: "admin",
      form: {
        user: "",
        password: "",
        autologin: false,
      },
      rules: {
        user: [
          {
            required: true,
            message: this.$t("login.userError"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("login.PWError"),
            trigger: "blur",
          },
        ],
      },
      islogin: false,
    };
  },
  watch: {
    userType(val) {
      if (val == "admin") {
        this.form.user = "admin";
        this.form.password = "admin";
      } else if (val == "user") {
        this.form.user = "user";
        this.form.password = "user";
      }
    },
  },
  mounted() {
    if (
      (window.location.hostname.includes("192.168") ||
        window.location.hostname.includes("dev.mov.movie")) &&
      window.location.hash.includes("admin")
    ) {
      this.form.user = "admin";
      this.form.password = "T5&mW8*zR1dF";
    }
  },
  methods: {
    nextDo() {
      this.isSaveing = false;
      if (!this.selected) {
        setTimeout(() => {
          this.isSaveing = true;
        }, 100);
        return;
      }
      this.login("creator");
    },
    async login(type = "") {
      var validate = await this.$refs.loginForm.validate().catch(() => {});
      if (!validate) {
        return false;
      }

      this.islogin = true;
      var data = {
        userName: this.form.user,
        pwd: this.form.password, //this.$TOOL.crypto.MD5(
      };
      if (type == "creator") Object.assign(data, { agreed: true });
      //获取token
      this.$API.auth.login
        .post(data)
        .then((res) => {
          // const res = await this.$API.auth.login.post(data);
          if (res.message == "success" && res.data) {
            if (res.data.code && res.data.code == 401) {
              this.showProtocol = true;
              return;
            }
            this.$TOOL.cookie.set("TOKEN", res.data.token, {
              expires: this.form.autologin ? 24 * 60 * 60 : 0,
            });
            this.$TOOL.cookie.set("AID", res.data.id, {
              expires: this.form.autologin ? 24 * 60 * 60 : 0,
            });
            this.$TOOL.data.set("USER_INFO", res.data.id);
          } else {
            this.islogin = false;
            this.$message.error(res.message);
            return false;
          }
          //获取菜单
          var menu;
          if (res.data.token) {
            //admin
            menu = {
              menu: [
                {
                  name: "home",
                  path: "/home",
                  meta: {
                    title: "表盘信息",
                    icon: "el-icon-home-filled",
                    img: "icon/home_icon",
                    type: "menu",
                  },
                  children: [
                    {
                      name: "home",
                      path: "/home",
                      meta: {
                        title: "表盘信息列表",
                        icon: "el-icon-home-filled",
                        img: "icon/home_icon",
                        affix: true,
                        type: "menu",
                      },
                      component: "home",
                      children: [
                        {
                          path: "/home/client/save",
                          name: "detailSave",
                          meta: {
                            title: "表盘信息详情",
                            hidden: true,
                            type: "menu",
                            active: "/home",
                          },
                          component: "home/client/save",
                        },
                      ],
                    },
                    {
                      name: "watchCode",
                      path: "/watchCode",
                      meta: {
                        title: "表盘激活码",
                        icon: "el-icon-user",
                        img: "icon/user_icon",
                        type: "menu",
                      },
                      component: "admin/watchCode",
                      children: [
                        {
                          path: "/watchCode/client/save",
                          name: "watchCodeSave",
                          meta: {
                            title: this.$t("menu.userDetail"),
                            hidden: true,
                            type: "menu",
                            active: "/watchCode",
                          },
                          component: "admin/watchCode/client/save",
                        },
                      ],
                    },
                    {
                      name: "watchActivation",
                      path: "/watchActivation",
                      meta: {
                        title: "模拟表盘激活",
                        icon: "el-icon-user",
                        img: "icon/user_icon",
                        type: "menu",
                      },
                      component: "admin/watchActivation",
                      children: [
                        {
                          path: "/watchActivation/client/save",
                          name: "watchActivationSave",
                          meta: {
                            title: this.$t("menu.userDetail"),
                            hidden: true,
                            type: "menu",
                            active: "/watchActivation",
                          },
                          component: "admin/watchActivation/client/save",
                        },
                      ],
                    },
                    // {
                    //   name: "movieTable",
                    //   path: "/movieTable",
                    //   meta: {
                    //     title: this.$t("menu.movieTable"),
                    //     icon: "el-icon-video-camera",
                    //     img: "icon/movie_icon",
                    //     type: "menu"
                    //   },
                    //   component: "admin/movieTable",
                    //   children: [
                    //     {
                    //       path: "/movieTable/client/save",
                    //       name: "movieSave",
                    //       meta: {
                    //         title: this.$t("menu.movieDetail"),
                    //         hidden: true,
                    //         type: "menu",
                    //         active: "/movieTable"
                    //       },
                    //       component: "admin/movieTable/client/save"
                    //     }
                    //   ]
                    // },
                    // {
                    //   name: "artWorkTable",
                    //   path: "/artWorkTable",
                    //   meta: {
                    //     title: this.$t("menu.artWorkTable"),
                    //     icon: "el-icon-notebook",
                    //     img: "icon/artwork_icon"
                    //   },
                    //   component: "admin/artWorkTable",
                    //   children: [
                    //     {
                    //       path: "/artWorkTable/client/save",
                    //       name: "artworkSave",
                    //       meta: {
                    //         title: this.$t("menu.artworkDetail"),
                    //         hidden: true,
                    //         type: "menu",
                    //         active: "/artWorkTable"
                    //       },
                    //       component: "admin/artWorkTable/client/save"
                    //     }
                    //   ]
                    // },
                    // {
                    //   name: "theatreTable",
                    //   path: "/theatreTable",
                    //   meta: {
                    //     title: this.$t("menu.theatreTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/theatre_icon"
                    //   },
                    //   component: "admin/theatreTable",
                    //   children: [
                    //     {
                    //       path: "/theatreTable/client/save",
                    //       name: "theatreSave",
                    //       meta: {
                    //         title: this.$t("menu.theatreDetail"),
                    //         hidden: true,
                    //         type: "menu",
                    //         active: "/theatreTable"
                    //       },
                    //       component: "admin/theatreTable/client/save"
                    //     }
                    //   ]
                    // },
                    // {
                    //   name: "orderTable",
                    //   path: "/orderTable",
                    //   meta: {
                    //     title: this.$t("menu.creator.orderHistory"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/order_icon"
                    //   },
                    //   component: "admin/orderTable",
                    //   children: [
                    //     {
                    //       path: "/orderTable/client/save",
                    //       name: "orderSave",
                    //       meta: {
                    //         title: this.$t("menu.theatreDetail"),
                    //         hidden: true,
                    //         type: "menu",
                    //         active: "/orderTable"
                    //       },
                    //       component: "admin/orderTable/client/save"
                    //     }
                    //   ]
                    // },
                    // {
                    //   name: "brandTable",
                    //   path: "/brandTable",
                    //   meta: {
                    //     title: this.$t("menu.brandTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/brand1_icon"
                    //   },
                    //   component: "admin/brandTable",
                    //   children: [
                    //     {
                    //       path: "/brandTable/client/save",
                    //       name: "brandSave",
                    //       meta: {
                    //         title: this.$t("menu.theatreDetail"),
                    //         hidden: true,
                    //         type: "menu",
                    //         active: "/brandTable"
                    //       },
                    //       component: "admin/brandTable/client/save"
                    //     }
                    //   ]
                    // },
                    // {
                    //   name: "activityTable",
                    //   path: "/activityTable",
                    //   meta: {
                    //     title: this.$t("menu.activityTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/activity_icon"
                    //   },
                    //   component: "admin/activityTable",
                    //   children: [
                    //     {
                    //       path: "/activityTable/client/save",
                    //       name: "brandSave",
                    //       meta: {
                    //         title: this.$t("menu.theatreDetail"),
                    //         hidden: true,
                    //         type: "menu",
                    //         active: "/activityTable"
                    //       },
                    //       component: "admin/activityTable/client/save"
                    //     }
                    //   ]
                    // },
                    // {
                    //   name: "shortTable",
                    //   path: "/shortTable",
                    //   meta: {
                    //     title: this.$t("menu.bannerShortDramaTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/video_icon",
                    //     type: "menu"
                    //   },
                    //   children: [
                    //     {
                    //       name: "shortListTable",
                    //       path: "/shortTable/short/index",
                    //       meta: {
                    //         title: this.$t("menu.shortList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/shortTable/short/index",
                    //       children: [
                    //         {
                    //           name: "shortDetailTable",
                    //           path: "/shortTable/short/client/save",
                    //           meta: {
                    //             title: this.$t("menu.shortDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/shortTable/short/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/shortTable/short/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "subtitleTable",
                    //       path: "/shortTable/subtitle/index",
                    //       meta: {
                    //         title: this.$t("menu.subtitleTable"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/shortTable/subtitle/index",
                    //       children: [
                    //         {
                    //           name: "subtitleDtailTable",
                    //           path: "/shortTable/subtitle/client/save",
                    //           meta: {
                    //             title: this.$t("menu.subtitleDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/shortTable/subtitle/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/shortTable/subtitle/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "previewTitleTable",
                    //       path: "/shortTable/preview/index",
                    //       meta: {
                    //         title: this.$t("menu.previewTitleTable"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/shortTable/preview/index",
                    //       children: [
                    //         {
                    //           name: "previewDtailTable",
                    //           path: "/shortTable/preview/client/save",
                    //           meta: {
                    //             title: this.$t("menu.previewTitleDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/shortTable/preview/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/shortTable/preview/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "newWorkTable",
                    //       path: "/shortTable/newwork/index",
                    //       meta: {
                    //         title: this.$t("menu.newWorkTitle"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/shortTable/newwork/index"
                    //     },
                    //     {
                    //       name: "hotTable",
                    //       path: "/shortTable/hotrecommend/index",
                    //       meta: {
                    //         title: this.$t("menu.hotTable"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/shortTable/hotrecommend/index",
                    //       children: [
                    //         {
                    //           name: "hotrecomendDtailTable",
                    //           path: "/shortTable/hotrecommend/client/save",
                    //           meta: {
                    //             title: this.$t("menu.hotTitleDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/shortTable/hotrecommend/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/shortTable/hotrecommend/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "rankTable",
                    //       path: "/shortTable/rank/index",
                    //       meta: {
                    //         title: this.$t("menu.rankTitle"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/shortTable/rank/index",
                    //     },
                    //     {
                    //       name: "comsoonTable",
                    //       path: "/shortTable/comsoon/index",
                    //       meta: {
                    //         title: this.$t("menu.coomsoonTitle"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/shortTable/comsoon/index"
                    //     },
                    //   ]
                    // },
                    // {
                    //   name: "ruleTable",
                    //   path: "/ruleTable",
                    //   meta: {
                    //     title: this.$t("menu.ruleTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/rule_icon",
                    //     type: "menu"
                    //   },
                    //   children: [
                    //     {
                    //       name: "categoryTable",
                    //       path: "/ruleTable/category/index",
                    //       meta: {
                    //         title: this.$t("menu.categoryList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/ruleTable/category/index",
                    //       children: [
                    //         {
                    //           name: "categoryDetailTable",
                    //           path: "/ruleTable/category/client/save",
                    //           meta: {
                    //             title: this.$t("menu.categoryDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/ruleTable/category/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/ruleTable/category/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "tagsTable",
                    //       path: "/ruleTable/tags/index",
                    //       meta: {
                    //         title: this.$t("menu.tagsList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/ruleTable/tags/index",
                    //       children: [
                    //         {
                    //           name: "tagsDetailTable",
                    //           path: "/ruleTable/tags/client/save",
                    //           meta: {
                    //             title: this.$t("menu.tagsDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/ruleTable/tags/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/ruleTable/tags/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "genreTable",
                    //       path: "/ruleTable/genre/index",
                    //       meta: {
                    //         title: this.$t("menu.genreList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/ruleTable/genre/index",
                    //       children: [
                    //         {
                    //           name: "genreDetailTable",
                    //           path: "/ruleTable/genre/client/save",
                    //           meta: {
                    //             title: this.$t("menu.genreDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/ruleTable/genre/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/ruleTable/genre/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "productionTable",
                    //       path: "/ruleTable/production/index",
                    //       meta: {
                    //         title: this.$t("menu.productionList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/ruleTable/production/index",
                    //       children: [
                    //         {
                    //           name: "productionDetailTable",
                    //           path: "/ruleTable/production/client/save",
                    //           meta: {
                    //             title: this.$t("menu.productionDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/ruleTable/production/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/ruleTable/production/client/save"
                    //         }
                    //       ]
                    //     },
                    //   ]
                    // },
                    // {
                    //   name: "bannerTable",
                    //   path: "/bannerTable",
                    //   meta: {
                    //     title: this.$t("menu.bannerTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/banner_icon"
                    //   },
                    //   component: "admin/bannerTable",
                    //   children: [
                    //     {
                    //       path: "/bannerTable/client/save",
                    //       name: "bannerSave",
                    //       meta: {
                    //         title: this.$t("menu.bannerTable"),
                    //         hidden: true,
                    //         type: "menu",
                    //         active: "/bannerTable"
                    //       },
                    //       component: "admin/bannerTable/client/save"
                    //     }
                    //   ]
                    // },
                    // {
                    //   name: "subscriptionTable",
                    //   path: "/subscriptionTable",
                    //   meta: {
                    //     title: this.$t("menu.subscriptionTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/rule_icon",
                    //     type: "menu"
                    //   },
                    //   children: [
                    //     {
                    //       name: "subscriptionListTable",
                    //       path: "/subscriptionTable/subscriptionList/index",
                    //       meta: {
                    //         title: this.$t("menu.subscriptionList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/subscriptionTable/subscriptionList/index",
                    //       children: [
                    //         {
                    //           name: "subscriptionDetailTable",
                    //           path: "/subscriptionTable/subscriptionList/client/save",
                    //           meta: {
                    //             title: this.$t("menu.subscriptionDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/subscriptionTable/subscriptionList/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/subscriptionTable/subscriptionList/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "subscriptionAuditListTable",
                    //       path: "/subscriptionTable/subscriptionAuditList/index",
                    //       meta: {
                    //         title: this.$t("menu.subscriptionAuditList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/subscriptionTable/subscriptionAuditList/index",
                    //       children: [
                    //         {
                    //           name: "subscriptionAuditDetailTable",
                    //           path: "/subscriptionTable/subscriptionAuditList/client/save",
                    //           meta: {
                    //             title: this.$t("menu.subscriptionDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/subscriptionTable/subscriptionAuditList/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/subscriptionTable/subscriptionAuditList/client/save"
                    //         }
                    //       ]
                    //     },
                    //   ]
                    // },
                    // {
                    //   name: "homepopTable",
                    //   path: "/homepopTable",
                    //   meta: {
                    //     title: this.$t("menu.homepopTable"),
                    //     icon: "el-icon-platform",
                    //     img: "icon/homepop_icon",
                    //     type: "menu"
                    //   },
                    //   children: [
                    //     {
                    //       name: "homepopListTable",
                    //       path: "/homepopTable/homepopList/index",
                    //       meta: {
                    //         title: this.$t("menu.homepopList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/homepopTable/homepopList/index",
                    //       children: [
                    //         {
                    //           name: "homepopDetailTable",
                    //           path: "/homepopTable/homepopList/client/save",
                    //           meta: {
                    //             title: this.$t("menu.homepopDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/homepopTable/homepopList/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/homepopTable/homepopList/client/save"
                    //         }
                    //       ]
                    //     },
                    //     {
                    //       name: "homepopAuditListTable",
                    //       path: "/homepopTable/homepopAuditList/index",
                    //       meta: {
                    //         title: this.$t("menu.homepopAuditList"),
                    //         icon: "el-icon-files",
                    //         type: "menu"
                    //       },
                    //       component: "admin/homepopTable/homepopAuditList/index",
                    //       children: [
                    //         {
                    //           name: "homepopAuditDetailTable",
                    //           path: "/homepopTable/homepopAuditList/client/save",
                    //           meta: {
                    //             title: this.$t("menu.homepopDetail"),
                    //             icon: "el-icon-files",
                    //             active: "/homepopTable/homepopAuditList/index",
                    //             hidden: true
                    //           },
                    //           component: "admin/homepopTable/homepopAuditList/client/save"
                    //         }
                    //       ]
                    //     },
                    // ]
                    // }
                  ],
                },
              ],
              permissions: ["list.add", "list.edit", "list.delete"],
            };
          }
          this.$TOOL.data.set("MENU", menu.menu);
          this.$TOOL.data.set("PERMISSIONS", menu.permissions);
          this.$TOOL.data.set("DASHBOARDGRID", menu.dashboardGrid);

          this.$router.replace({
            path: "/",
          });
          this.$message.success("Login Success");
          this.islogin = false;
        })
        .catch((e) => {
          this.islogin = false;
          // this.$message.error(e.data.message)
          console.log(`password error`, e);
        });
    },
  },
};
</script>

<style scoped>
.protocolbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.contbox {
  width: 60%;
  height: 80%;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
}
.title {
  font-size: 27px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}
.content {
  width: 100%;
  height: 80%;
  overflow-y: scroll;
  margin: 30px 0;
}
#footer {
  text-align: center;
  margin: 10px 0;
}
.move {
  animation: move 0.1s 0.1s 5;
}

@keyframes move {
  from {
    transform: translateY(5px);
  }
  to {
    transform: translateY(0px);
  }
}
</style>
